<template>
  <div class="content">
    <div class="public-tab">
      <a href="javascript:;" :class="defaultIndex==item.id?'flex-tab active':'flex-tab'" v-for="(item,key) of tabArr" @click="resetForm(item)"
        :key="key">{{item.name|t}}</a>
    </div>
    <div class="form" v-show="defaultIndex==1">
      <zx-form-group :title="$t('MOBILE_LABEL')">
        <zx-input v-model="phoneForm.phone" type="text" :place="$t('MOBILE_PLACE')" ref='phone' :rules="rules.phone">
          <i class="phone-icon icon" slot="icon"></i>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('CODE_LABEL')">
        <zx-input v-model="phoneForm.codes" type="text" :place="$t('CODE_PLACE')" ref='codes' :rules="rules.code">
          <i class="code-icon icon" slot="icon"></i>
          <span class="input-text" slot="text" @click="getCode(phoneForm.phone,'phone',$t('GET_CODE'),$event,'phoneCodeBool')">{{'GET_CODE'|t}}</span>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('PASSWORD')">
        <zx-input v-model="phoneForm.password" type="password" :place="$t('PASSWORD_PLACE')" ref='password' :rules="rules.password">
          <i class="pass-icon icon" slot="icon"></i>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('PASSWORD')">
        <zx-input v-model="phoneForm.checkPassword" type="password" :place="$t('PASSWORD_PLACE')" ref='checkPassword' :rules="rules.password">
          <i class="pass-icon icon" slot="icon"></i>
        </zx-input>
      </zx-form-group>
      <zx-form-group>
        <input type="button" class="submit-btn mt-20  green-btn radius" :value="$t('COMFIRM')" @click="submit('phoneForm','phone')">
      </zx-form-group>
    </div>
    <div class="form" v-show="defaultIndex==2">
      <zx-form-group :title="$t('EMAIL_LBAEL')">
        <zx-input v-model="emailForm.email" type="text" :place="$t('EMAIL_PLACE')" ref='email' :rules="rules.email">
          <i class="phone-icon icon" slot="icon"></i>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('CODE_LABEL')">
        <zx-input v-model="emailForm.code" :place="$t('CODE_PLACE')" ref='code' :rules="rules.code">
          <i class="code-icon icon" slot="icon"></i>
          <span class="input-text" slot="text" @click="getCode(emailForm.email,'email',$t('GET_CODE'),$event,'emialCodeBool')">{{'GET_CODE'|t}}</span>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('PASSWORD')">
        <zx-input v-model="emailForm.pass" type="password" :place="$t('PASSWORD_PLACE')" ref='pass' :rules="rules.password">
          <i class="pass-icon icon" slot="icon"></i>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('PASSWORD')">
        <zx-input v-model="emailForm.checkPass" type="password" :place="$t('PASSWORD_PLACE')" ref='checkPass' :rules="rules.password">
          <i class="pass-icon icon" slot="icon"></i>
        </zx-input>
      </zx-form-group>
      <zx-form-group>
        <input type="button" class="submit-btn mt-20 green-btn radius" :value="$t('COMFIRM')" @click="submit('emailForm','email')">
      </zx-form-group>
    </div>
  </div>
</template>
<script>
  import { UserInfo } from '@/services';
  import { Form, Func, Rules } from '@/providers';
  export default {
    data() {
      return {
        defaultIndex: 1,
        phoneCodeBool: false,
        emialCodeBool: false,
        phoneForm: {
          phone: '',
          codes: '',
          password: '',
          checkPassword: ''
        },
        emailForm: {
          email: '',
          code: '',
          pass: '',
          checkPass: ''
        },
        rules: Rules,
        tabArr: [
          {
            id: 1,
            name: 'FINDPHONE',
            formName: 'phoneForm'
          },
          {
            id: 2,
            name: 'FINDEMAIL',
            formName: 'emailForm'
          }
        ]
      };
    },
    methods: {
      // 获取验证码
      getCode(val, type, innerText, event, clickBool) {
        if (this[clickBool]) { return false; };
        if (!Form.validItem(this, type)) { return; };
        this[clickBool] = true;
        if (type == 'phone') {
          Form.SendMobile(val, event.target, clickBool, innerText);
        } else {
          Form.SentMail(val, event.target, clickBool, innerText);
        }
      },
      // 表单提交
      async submit(formName, type) {
        if (!Form.validataForm(this, formName)) {
          return false;
        }
        let _parmas = this[formName];
        try {
          let res = await UserInfo.ForgetPassword({
            pattern: type == 'phone' ? _parmas.phone : _parmas.email,
            newPassword: Func.PasswordEncrypt(type == 'phone' ? _parmas.password : _parmas.pass),
            validataCode: type == 'phone' ? _parmas.codes : _parmas.code,
            type: type == 'phone' ? 1 : 2
          });
          Form.Totas(res.desc, () => {
            this.$router.push('/login');
          });
        } catch (error) {
          console.log(error);
        }
      },
      resetForm(item) {
        if (this.defaultIndex == item.id) { return; };
        this.defaultIndex = item.id;
        Form.resetFrom(this, item.formName);
      },
      // 表单重置
      resetFrom(formName) {
        Form.resetFrom(this, formName);
      }
    }
  };
</script>
<style scoped lang="scss">
  @import "../assets/sass/login.scss";
</style>